<template>
    <view class="content">
        <image src="../static/image/s_bg.jpg" class="info-bg"></image>
        <u-navbar title="个人信息" :background="background" title-size="32" :border-bottom="false" :immersive="true" :is-back="true" title-color="#000" title-width="300"></u-navbar>
        
        <view :style="{paddingTop: statusBar + 85 + 'px'}">
            <view class="wrapper">
                <!-- <image :src="info.image || '/static/icon/avatar.png'" class="avatar"></image> -->
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				    <image class="avatar" :src="imgUrl" v-if="!avatarUrl"></image>
				    <image class="avatar" :src="avatarUrl"></image>
				</button>
				
                <view class="box">
                    <!-- <view class="title">微信昵称</view> -->
                    <!-- <input type="text" placeholder="请输入微信昵称" class="inp"> -->
                    
                    <view class="u-flex u-row-between u-p-t-20">
                        <view >注册信息</view>
                        <view class="btn" @click="toApply">认证</view>
                    </view>
                    
                    <view class="down">
                        <view class="item">
                            <view class="grey">姓名</view>
                            <view class="item-right">{{info.name}}</view>
                        </view>
                        <view class="item">
                            <view class="grey">车牌号</view>
                            <view class="item-right">{{info.number}}</view>
                        </view>
                        <view class="item">
                            <view class="grey">车长</view>
                            <view class="item-right">{{info.length}}</view>
                        </view>
                        <view class="item">
                            <view class="grey">载重</view>
                            <view class="item-right">{{info.load}}</view>
                        </view>
                        <view class="item">
                            <view class="grey">手机号</view>
                            <view class="item-right">
                                <input type="number" v-model="info.phone" placeholder="请获取" class="inp-d" disabled>
                                <!-- <view class="btn2">修改手机号</view> -->
								<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn1">修改手机号</button>
                            </view>
                        </view>
                        <view class="item">
                            <view class="grey">紧急联系人电话</view>
                            <view class="item-right">
                                <input type="number" maxlength="11" v-model="info.contact_phone" placeholder="请输入" class="inp-d" :disabled="disabled">
                                <view class="btn2" v-if="disabled" @click="edit">修改</view>
								<view class="btn2" v-else @click="confirm">确认</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	const defaultAvatarUrl = '/static/icon/avatar.png'
	import { API_URL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                disabled: true,
				info: {},
				URL: API_URL, //上传图片用的
				imgUrl: defaultAvatarUrl,
				avatarUrl: '',
				image_id: '',
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
        },
		onShow() {
			this.getInfo()
		},
        methods: {
			// 修改头像
			onChooseAvatar(e) {
			    console.log(e)
				uni.uploadFile({
				    url: this.URL + 'api/upload_image', //仅为示例，并非真实接口地址。
					filePath: e.detail.avatarUrl,
				    name: 'image',
				    success: result => {
				        console.log(result)
				        let data = JSON.parse(result.data).detail; //后台返回的路径data.attach_uri
				        this.avatarUrl = data.image
						this.image_id = data.image_id
						
						this.$ajax('update_user_detail', {
							user_token: this.$getSync('userToken'),
							user_name: this.info.name,
							image_id: this.image_id,
							phone: this.info.phone,
						}).then(ret => {
							if (ret.success == 1000) {
								this.$toast('修改成功')
								setTimeout(() => {
									this.getInfo()
								},500)
							} else {
								this.$toast(ret.msg);
							}
						});
				    }
				});
			},
			
			toApply() {
				// info.status  0未认证 1待审核 2通过 3驳回
				if (this.info.status == 0 || this.info.status == 2) {
					this.$gTo(`/pagesA/apply/apply-1`)
				} else if (this.info.status == 1 || this.info.status == 3) {
					this.$gTo(`/pagesA/apply/apply-3`)
				}
			},
			
			edit() {
				this.disabled = false
				this.info.contact_phone = ''
			},
			
			confirm() {
				if (!this.info.contact_phone) {
					this.$toast('请输入紧急联系人电话')
				}
				if(!this.$checkPhone(this.info.contact_phone)){
					this.$toast('请输入正确的紧急联系人电话')
					return
				}
				
				this.$ajax('update_user_detail', {
				    user_token: this.$getSync('userToken'),
					user_name: this.info.name,
					image_id: this.info.image_id,
					phone: this.info.contact_phone,
				}).then(ret => {
				    if (ret.success == 1000) {
						this.disabled = true
				        this.getInfo()
				    } else {
				        this.$toast(ret.msg);
				    }
				});
			},
			
			getInfo() {
			    this.$ajax('driver_detail', {
			        user_token: this.$getSync('userToken'),
			    }).then(ret => {
			        if (ret.success == 1000) {
			            this.info = ret.detail
						this.avatarUrl = ret.detail.image
						this.image_id = ret.detail.image_id
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    .btn1{
        font-size: 28rpx;
        color: #004580;
        background-color: transparent;
		padding: 0;
    }
    .btn1::after {
        border: none;
    }
    
    
    page{
        background-color: #fff;
    }
    .info-bg{
        width: 750rpx;
        height: 440rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    
    .wrapper{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
	.avatar-wrapper {
	    width: 160rpx;
	    height: 160rpx;
	    margin: 0;
	    padding: 0;
	    background-color: rgba(0,0,0,0) !important;
	    // position: relative;
		border: 2rpx solid #fff;
		border-radius: 50%;
		margin-bottom: -55rpx;
	    
	    &:after {
	        border: none;
	    }
	}
    .avatar{
        width: 160rpx;
        height: 160rpx;
        // border: 2rpx solid #fff;
        // border-radius: 50%;
        // margin-bottom: -55rpx;
    }
    .box{
        width: 100%;
        background-color: #fff;
        border-radius: 30rpx 30rpx 0 0 ;
        padding: 125rpx 50rpx 90rpx;
        font-size: 30rpx;
    }
    .title{
        padding-bottom: 15rpx;
    }
    .inp{
        width: 100%;
        height: 90rpx;
        padding: 0 30rpx;
        background-color: #fbfbfd;
        border: 2rpx solid #efefef;
        border-radius: 20rpx;
        margin-bottom: 30rpx;
        color: #5a6c92;
    }
    .btn{
        font-size: 26rpx;
        color: #fff;
        text-align: center;
        padding: 15rpx 25rpx;
        background-color: #00457f;
        border-radius: 50rpx;
    }
    
    .down{
        width: 100%;
        padding: 20rpx 30rpx;
        background-color: #fbfbfd;
        border: 2rpx solid #efefef;
        border-radius: 20rpx;
        margin-top: 20rpx;
    }
    .item{
        padding: 16rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .grey{
        width: 230rpx;
        color: #656565;
    }
    .item-right{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .inp-d{
        flex: 1;
    }
    .btn2{
        font-size: 28rpx;
        color: #004580;
    }

</style>
